<script setup lang="ts">
import { getObjValue } from '@/utils/util';
import ico1 from '@/assets/images/platformChart/ico_1.png';
import ico2 from '@/assets/images/platformChart/ico_2.png';
import ico3 from '@/assets/images/platformChart/ico_3.png';

defineProps<{
  segObj7: any;
  segObj8: any;
  segObj9: any;
}>();
</script>
<template>
  <div class="rounded-xl bg-white shadow mt-3 pb-4">
    <div class="title-2 p-4">{{ segObj7?.title || '-' }}</div>
    <div class="flex px-3">
      <div class="bg-[#F6F7F8] rounded-lg p-2 flex-1">
        <div class="text-[#666666] text-xs font-medium">{{ getObjValue(segObj7?.data?.[0]?.[0])[0] }}</div>
        <div class="title-2 my-2">{{ getObjValue(segObj7?.data?.[0]?.[0])[1] }}</div>
        <div class="flex items-center">
          <span class="text-xs text-[#999]">{{ getObjValue(segObj7?.data?.[0]?.[1])[0] }}</span>
          <span class="num-1 ml-2">{{ getObjValue(segObj7?.data?.[0]?.[1])[1] }}</span>
        </div>
        <div class="flex items-center">
          <span class="text-xs text-[#999]">{{ getObjValue(segObj7?.data?.[0]?.[2])[0] }}</span>
          <span class="num-1 ml-2">{{ getObjValue(segObj7?.data?.[0]?.[2])[1] }}</span>
        </div>
      </div>
      <div class="bg-[#F6F7F8] rounded-lg p-2 flex-1 ml-2">
        <div class="text-[#666666] text-xs font-medium">{{ getObjValue(segObj7?.data?.[1]?.[0])[0] }}</div>
        <div class="title-2 my-2">{{ getObjValue(segObj7?.data?.[1]?.[0])[1] }}</div>
        <div class="flex items-center">
          <span class="text-xs text-[#999]">{{ getObjValue(segObj7?.data?.[1]?.[1])[0] }}</span>
          <span class="num-1 ml-2">{{ getObjValue(segObj7?.data?.[1]?.[1])[1] }}</span>
        </div>
        <div class="flex items-center">
          <span class="text-xs text-[#999]">{{ getObjValue(segObj7?.data?.[1]?.[2])[0] }}</span>
          <span class="num-1 ml-2">{{ getObjValue(segObj7?.data?.[1]?.[2])[1] }}</span>
        </div>
      </div>
    </div>
    <!-- 手续费奖励 -->
    <div class="title-2 p-4 mt-2">{{ segObj9?.title || '-' }}</div>
    <div class="mx-3 bg-[#F6F7F8] rounded-lg px-2 py-3 flex justify-between">
      <div>
        <div class="text-xs text-[#999]">{{ getObjValue(segObj9?.data?.[0])[0] }}</div>
        <div class="num-1 mt-2">{{ getObjValue(segObj9?.data?.[0])[1] }}</div>
      </div>
      <div>
        <div class="text-xs text-[#999]">{{ getObjValue(segObj9?.data?.[1])[0] }}</div>
        <div class="num-1 mt-2">{{ getObjValue(segObj9?.data?.[1])[1] }}</div>
      </div>
      <div>
        <div class="text-xs text-[#999]">{{ getObjValue(segObj9?.data?.[2])[0] }}</div>
        <div class="num-1 mt-2">{{ getObjValue(segObj9?.data?.[2])[1] }}</div>
      </div>
    </div>
    <!-- 赋能生态 -->
    <div class="title-2 p-4 mt-2">{{ segObj8?.title || '-' }}</div>
    <div class="mx-3 bg-[#F6F7F8] rounded-lg px-2 py-3 flex justify-between">
      <div>
        <div class="text-xs text-[#999]">{{ getObjValue(segObj8?.data?.[0])[0] }}</div>
        <div class="num-1 mt-2">{{ getObjValue(segObj8?.data?.[0])[1] }}</div>
      </div>
      <div>
        <div class="text-xs text-[#999]">{{ getObjValue(segObj8?.data?.[1])[0] }}</div>
        <div class="num-1 mt-2">{{ getObjValue(segObj8?.data?.[1])[1] }}</div>
      </div>
    </div>
    <div class="mt-2 mx-3">
      <div class="w-full overflow-x-auto flex scroll-hidden">
        <div class="flex-[0_0_130px] px-3 py-2 rounded-lg bg-[rgba(77,126,255,0.06)] mr-2">
          <div class="flex items-center mt-1">
            <van-image width="15" height="15" :src="ico1" />
            <div class="text-xs text-[#4D7EFF] ml-2">{{ getObjValue(segObj8?.data?.[2])[0] }}</div>
          </div>
          <div class="title-2 mt-2">{{ getObjValue(segObj8?.data?.[2])[1] }}</div>
        </div>
        <div class="flex-[0_0_130px] px-3 py-2 rounded-lg bg-[rgba(106,99,255,0.06)] mr-2">
          <div class="flex items-center mt-1">
            <van-image width="15" height="15" :src="ico2" />
            <div class="text-xs text-[#6A63FF] ml-2">{{ getObjValue(segObj8?.data?.[3])[0] }}</div>
          </div>
          <div class="title-2 mt-2">{{ getObjValue(segObj8?.data?.[3])[1] }}</div>
        </div>
        <div class="flex-[0_0_130px] px-3 py-2 rounded-lg bg-[rgba(0,208,176,0.06)] mr-2">
          <div class="flex items-center mt-1">
            <van-image width="15" height="15" :src="ico3" />
            <div class="text-xs text-[#00D0B0] ml-2">{{ getObjValue(segObj8?.data?.[4])[0] }}</div>
          </div>
          <div class="title-2 mt-2">{{ getObjValue(segObj8?.data?.[4])[1] }}</div>
        </div>
      </div>
    </div>
  </div>
</template>
